
<script lang="ts" setup>
import {onMounted, ref, watch} from "vue";
import {ElMessage} from 'element-plus'
import {InfoFilled, Plus} from '@element-plus/icons-vue'
import type {UploadProps} from 'element-plus'
import {uploadUrl} from "../request/URL.js";
import {addSoft,setSoft,delSoft,deleteimg,addShopping} from "../request/request.js"
import { inject } from 'vue'


const props = defineProps<{ fileList: any }>();//接收外部传过来的值（接收）
const Emit = defineEmits(["receiveFile"]);//定义外部的函数 向外界传值（确定按钮）
const reload2:any = inject('reload2')//调用home.vue重载方法(body)
const data = ref({
  fileDialogShow: true,//模态默认展开
  fileList: {
      id:null,
      price:0,
      title:null,//标题
      address:null,//下载地址
      content:null,//软件内容
      picture:null,//展览图
      membership:'SVIPusers',//是否是会员
  },//文件列表
})//数据源

watch(() => data.value.fileDialogShow, (newValue, oldValue) => {
  if (newValue == false) {
    sendFileList(false)
  }
})//监听数据变化
onMounted(() => {
  if (props.fileList!=false){data.value.fileList=props.fileList}
})

/**
 * @param {{文件上传成功}}
 */
const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
  if (data.value.fileList.picture!=null){
    deleteimg({fileName:data.value.fileList.picture});
  }
  if (response.code==200){
    data.value.fileList.picture = response.data;
    ElMessage.success('上传成功');
  }else {
    ElMessage.error('上传失败')
  }
}


/**
 * @param {{文件上传前}}
 */
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}


/**
 * @param {{提交发送文件数据}}（添加文件新数据）
 */
const sendFileList = (e) => {
  if (e == false) {
    Emit("receiveFile", e)
  } else {
    if (props.fileList==false){
      // 添加文件
      addSoft(data.value.fileList).then((res)=>{
        if (res.code==200){ElMessage.success('新增成功');
          reload2();
          Emit("receiveFile", false)
        }else {ElMessage.error('新增失败')}
      });
    }
  }
}


/**
 * @param {{提交发送文件数据}}（修改文件数据）
 */
const updataFileList=()=>{
  setSoft(data.value.fileList).then((res)=>{
    if (res.code==200){ElMessage.success('修改成功');
      Emit("receiveFile", false)
    }else {ElMessage.error('修改失败')}
  })
}


/**
 * @param {{提交发送文件数据}}（删除文件数据）
 */
const deleteFileList=()=>{
  deleteimg({fileName:data.value.fileList.picture});
  delSoft({id:data.value.fileList.id}).then((res)=>{
    if (res.code==200){
      Emit("receiveFile", false)
      reload2();
      ElMessage.success('删除成功')
    }else {
      ElMessage.error('删除失败')
    }
  })
}

</script>

<template>
    <el-dialog
            v-model="data.fileDialogShow"
            align-center
            title="添加文件"
            width="450"
    >
        <div class="file-dialog-body">
            <!--图片上传-->
            <div>
                <el-upload
                        :before-upload="beforeAvatarUpload"
                        :class="data.fileList.picture==null? 'el-opload-img':''"
                        :on-success="handleAvatarSuccess"
                        :show-file-list="false"
                        :action="uploadUrl"
                >
                  <img v-if="data.fileList.picture" :src="data.fileList.picture" class="avatar"/>
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus/>
                    </el-icon>
                </el-upload>
            </div>
            <!--链接  标题 详细内容-->
            <div>
                <el-input v-model="data.fileList.title" class="dialog-input" maxlength="15" placeholder="Please input  title"
                          show-word-limit type="text"/>
                <el-input v-model="data.fileList.price" class="dialog-input" maxlength="5" placeholder="Please input  price"
                          show-word-limit type="number"/>
                <el-input v-model="data.fileList.address" class="dialog-input" placeholder="Please input  link">
                    <template #prepend>Https://</template>
                </el-input>
                <el-input v-model="data.fileList.content" autosize class="dialog-input" placeholder="Please input  details"
                          type="textarea"></el-input>
                <el-radio-group v-model="data.fileList.membership" style="margin-top: 10px">
                    <el-radio label="Ordinary">免费下载</el-radio>
                    <el-radio label="SellingGoods">单独收费</el-radio>
                    <el-radio label="SVIPusers">会员专享</el-radio>
                </el-radio-group>
            </div>
        </div>
        <!--会员 取消 添加 删除 按钮-->
        <template #footer>
         <span class="dialog-footer footer-css">
          <div style="width: 100%;display: flex;justify-content: flex-end;margin-top: -20px">
           <el-button @click="data.fileDialogShow=false">取消</el-button>
           <el-button v-if="props.fileList==false? false:true" type="danger" @click="deleteFileList()">删除</el-button>
             <el-button v-if="props.fileList==false" type="primary" @click="sendFileList(true)">添加</el-button>
             <el-button v-else type="primary" @click="updataFileList()">修改</el-button>
          </div>
         </span>
        </template>

    </el-dialog>
</template>

<style lang="less" scoped>
.file-dialog-body {
  width: 100%;
  height: auto;
}

.file-dialog-body div:nth-child(1) {
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-css{
  display: flex;
  justify-content: space-between;
}
.dialog-input {
  margin-top: 15px;
}

.el-opload-img {
  width: 148px;
  height: 148px;
  display: block;
  border: 2px solid #8c939d;
  border-radius: 10px;
}

.avatar {
  width: 148px;
  height: 148px;
  border-radius: 10px;
  object-fit: cover;
}


.el-opload-img:hover {
  border-color: gray;
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
